<template>
    <div class="app-container">
        <div class="filter-container">
            <div class="filter-item block">
                <el-date-picker
                        size="medium"
                        v-model="query.eat_date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="订餐日期">
                </el-date-picker>
            </div>
            <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchList()">搜 索</el-button>
        </div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane :label="breakfastTitle" name="first">
                <template v-cloak v-if="activeName === 'first'">
                    <div class="filter-container">
                        <el-input v-model="breakfastQuery.eat_name" class="filter-item w-200" size="medium" placeholder="吃饭人姓名"></el-input>
                        <el-input v-model="breakfastQuery.eat_phone" class="filter-item w-200" size="medium" placeholder="吃饭人电话"></el-input>
                        <el-select class="filter-item w-200" size="medium" v-model="breakfastQuery.status" clearable placeholder="订单状态">
                            <el-option label="已提交" value="10"></el-option>
                            <el-option label="制作中" value="20"></el-option>
                            <el-option label="已完成" value="30"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="breakfastQuery.price_rule" clearable placeholder="计费规则">
                            <el-option label="固定餐标" value="1"></el-option>
                            <el-option label="计算餐标" value="2"></el-option>
                            <el-option label="计全额" value="3"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="breakfastQuery.is_calculated" clearable placeholder="是否结算餐费">
                            <el-option label="已结算" value="1"></el-option>
                            <el-option label="未结算" value="0"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="breakfastQuery.orderType" clearable placeholder="订单类型">
                            <el-option label="正常订单" value="normal"></el-option>
                            <el-option label="加餐订单" value="addition"></el-option>
                            <el-option label="子女订单" value="children"></el-option>
                        </el-select>
                        <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchBreakfastList(true)">搜 索</el-button>
                        <el-button class="filter-item" size="medium" icon="el-icon-download" @click="downloadOrder(breakfastQuery.eat_type)">导出订单</el-button>
                    </div>
                    <el-table v-loading="loading" :data="breakfastOrders" border style="width: 100%">
                        <el-table-column width="100px" label="#" align="center">
                            <template slot-scope="scope" >
                                {{breakfastQuery.size * (breakfastQuery.page-1) + scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="eat_name" label="吃饭人姓名" align="center"></el-table-column>
                        <el-table-column prop="eat_phone" label="吃饭人电话" align="center"></el-table-column>
                        <el-table-column prop="rule.eat_date" label="订餐日期" align="center"></el-table-column>
                        <el-table-column prop="rule.eat_type" label="订餐类型" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.rule.eat_type === 1">早餐</span>
                                <span v-if="scope.row.rule.eat_type === 2">午餐</span>
                                <span v-if="scope.row.rule.eat_type === 3">晚餐</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="计费规则" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.price_rule ? (scope.row.price_rule === 1 ? '固定餐标' : (scope.row.price_rule === 2 ? '计算餐标' : '计全额')) : '' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="是否结算餐费" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_calculated === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="origin_price" label="原价(元)" align="center"></el-table-column>
                        <el-table-column prop="pay_price" label="实际支付价格(元)" align="center"></el-table-column>
                        <el-table-column label="是否自动产生订单" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_auto === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="订单状态" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.status === 10">已提交</span>
                                <span v-if="scope.row.status === 20">制作中</span>
                                <span v-if="scope.row.status === 30">已完成</span>
                                <span v-if="scope.row.status === 40">已取消</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type_label" label="订单类型" align="center"></el-table-column>
                        <el-table-column prop="created_at" label="下单时间" align="center"></el-table-column>
                        <el-table-column prop="making_at" label="制作时间" align="center"></el-table-column>
                        <el-table-column prop="finished_at" label="完成时间" align="center"></el-table-column>
                        <el-table-column prop="canceled_at" label="取消时间" align="center"></el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                @size-change="handleBreakfastSizeChange"
                                @current-change="handleBreakfastCurrentChange"
                                :current-page="breakfastQuery.page"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="breakfastQuery.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="breakfastTotal">
                        </el-pagination>
                    </div>
                </template>
            </el-tab-pane>
            <el-tab-pane :label="lunchTitle" name="second">
                <template v-cloak v-if="activeName === 'second'">
                    <div class="filter-container">
                        <el-input v-model="lunchQuery.eat_name" class="filter-item w-200" size="medium" placeholder="吃饭人姓名"></el-input>
                        <el-input v-model="lunchQuery.eat_phone" class="filter-item w-200" size="medium" placeholder="吃饭人电话"></el-input>
                        <el-select class="filter-item w-200" size="medium" v-model="lunchQuery.status" clearable placeholder="订单状态">
                            <el-option label="已提交" value="10"></el-option>
                            <el-option label="制作中" value="20"></el-option>
                            <el-option label="已完成" value="30"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="lunchQuery.price_rule" clearable placeholder="计费规则">
                            <el-option label="固定餐标" value="1"></el-option>
                            <el-option label="计算餐标" value="2"></el-option>
                            <el-option label="计全额" value="3"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="lunchQuery.is_calculated" clearable placeholder="是否结算餐费">
                            <el-option label="已结算" value="1"></el-option>
                            <el-option label="未结算" value="0"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="lunchQuery.orderType" clearable placeholder="订单类型">
                            <el-option label="正常订单" value="normal"></el-option>
                            <el-option label="加餐订单" value="addition"></el-option>
                            <el-option label="子女订单" value="children"></el-option>
                        </el-select>
                        <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchLunchList(true)">搜 索</el-button>
                        <el-button class="filter-item" size="medium" icon="el-icon-download" @click="downloadOrder(lunchQuery.eat_type)">导出订单</el-button>
                    </div>
                    <el-table v-loading="loading2" :data="lunchOrders" border style="width: 100%">
                        <el-table-column width="100px" label="#" align="center">
                            <template slot-scope="scope" >
                                {{lunchQuery.size * (lunchQuery.page-1) + scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="eat_name" label="吃饭人姓名" align="center"></el-table-column>
                        <el-table-column prop="eat_phone" label="吃饭人电话" align="center"></el-table-column>
                        <el-table-column prop="rule.eat_date" label="订餐日期" align="center"></el-table-column>
                        <el-table-column prop="rule.eat_type" label="订餐类型" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.rule.eat_type === 1">早餐</span>
                                <span v-if="scope.row.rule.eat_type === 2">午餐</span>
                                <span v-if="scope.row.rule.eat_type === 3">晚餐</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="计费规则" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.price_rule ? (scope.row.price_rule === 1 ? '固定餐标' : (scope.row.price_rule === 2 ? '计算餐标' : '计全额')) : '' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="是否结算餐费" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_calculated === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="origin_price" label="原价(元)" align="center"></el-table-column>
                        <el-table-column prop="pay_price" label="实际支付价格(元)" align="center"></el-table-column>
                        <el-table-column label="是否自动产生订单" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_auto === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="订单状态" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.status === 10">已提交</span>
                                <span v-if="scope.row.status === 20">制作中</span>
                                <span v-if="scope.row.status === 30">已完成</span>
                                <span v-if="scope.row.status === 40">已取消</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="created_at" label="下单时间" align="center"></el-table-column>
                        <el-table-column prop="making_at" label="制作时间" align="center"></el-table-column>
                        <el-table-column prop="finished_at" label="完成时间" align="center"></el-table-column>
                        <el-table-column prop="canceled_at" label="取消时间" align="center"></el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                @size-change="handleLunchSizeChange"
                                @current-change="handleLunchCurrentChange"
                                :current-page="lunchQuery.page"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="lunchQuery.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="lunchTotal">
                        </el-pagination>
                    </div>
                </template>
            </el-tab-pane>
            <el-tab-pane :label="dinnerTitle" name="third">
                <template v-cloak v-if="activeName === 'third'">
                    <div class="filter-container">
                        <el-input v-model="dinnerQuery.eat_name" class="filter-item w-200" size="medium" placeholder="吃饭人姓名"></el-input>
                        <el-input v-model="dinnerQuery.eat_phone" class="filter-item w-200" size="medium" placeholder="吃饭人电话"></el-input>
                        <el-select class="filter-item w-200" size="medium" v-model="dinnerQuery.status" clearable placeholder="订单状态">
                            <el-option label="已提交" value="10"></el-option>
                            <el-option label="制作中" value="20"></el-option>
                            <el-option label="已完成" value="30"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="dinnerQuery.price_rule" clearable placeholder="计费规则">
                            <el-option label="固定餐标" value="1"></el-option>
                            <el-option label="计算餐标" value="2"></el-option>
                            <el-option label="计全额" value="3"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="dinnerQuery.is_calculated" clearable placeholder="是否结算餐费">
                            <el-option label="已结算" value="1"></el-option>
                            <el-option label="未结算" value="0"></el-option>
                        </el-select>
                        <el-select class="filter-item w-200" size="medium" v-model="dinnerQuery.orderType" clearable placeholder="订单类型">
                            <el-option label="正常订单" value="normal"></el-option>
                            <el-option label="加餐订单" value="addition"></el-option>
                            <el-option label="子女订单" value="children"></el-option>
                        </el-select>
                        <el-button class="filter-item" size="medium" icon="el-icon-search" @click="fetchDinnerList(true)">搜 索</el-button>
                        <el-button class="filter-item" size="medium" icon="el-icon-download" @click="downloadOrder(dinnerQuery.eat_type)">导出订单</el-button>
                    </div>
                    <el-table v-loading="loading3" :data="dinnerOrders" border style="width: 100%">
                        <el-table-column width="100px" label="#" align="center">
                            <template slot-scope="scope" >
                                {{dinnerQuery.size * (dinnerQuery.page-1) + scope.$index + 1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="eat_name" label="吃饭人姓名" align="center"></el-table-column>
                        <el-table-column prop="eat_phone" label="吃饭人电话" align="center"></el-table-column>
                        <el-table-column prop="rule.eat_date" label="订餐日期" align="center"></el-table-column>
                        <el-table-column prop="rule.eat_type" label="订餐类型" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.rule.eat_type === 1">早餐</span>
                                <span v-if="scope.row.rule.eat_type === 2">午餐</span>
                                <span v-if="scope.row.rule.eat_type === 3">晚餐</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="计费规则" align="center">
                            <template slot-scope="scope" >
                                {{ scope.row.price_rule ? (scope.row.price_rule === 1 ? '固定餐标' : (scope.row.price_rule === 2 ? '计算餐标' : '计全额')) : '' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="是否结算餐费" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_calculated === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="origin_price" label="原价(元)" align="center"></el-table-column>
                        <el-table-column prop="pay_price" label="实际支付价格(元)" align="center"></el-table-column>
                        <el-table-column label="是否自动产生订单" align="center">
                            <template slot-scope="scope" >
                                <i class="el-icon-check" v-if="scope.row.is_auto === 1" />
                                <i class="el-icon-close" v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="订单状态" align="center">
                            <template slot-scope="scope" >
                                <span v-if="scope.row.status === 10">已提交</span>
                                <span v-if="scope.row.status === 20">制作中</span>
                                <span v-if="scope.row.status === 30">已完成</span>
                                <span v-if="scope.row.status === 40">已取消</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="created_at" label="下单时间" align="center"></el-table-column>
                        <el-table-column prop="making_at" label="制作时间" align="center"></el-table-column>
                        <el-table-column prop="finished_at" label="完成时间" align="center"></el-table-column>
                        <el-table-column prop="canceled_at" label="取消时间" align="center"></el-table-column>
                    </el-table>
                    <div class="pagination-container">
                        <el-pagination
                                @size-change="handleDinnerSizeChange"
                                @current-change="handleDinnerCurrentChange"
                                :current-page="dinnerQuery.page"
                                :page-sizes="[10, 20, 30, 50]"
                                :page-size="dinnerQuery.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="dinnerTotal">
                        </el-pagination>
                    </div>
                </template>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import { fetchOrderStatistics } from '@/api/book-order'
    export default {
      name: 'statistics',
      data() {
        const nowDate = () => {
          const date = new Date()
          const seperator1 = '-'
          const year = date.getFullYear()
          let month = date.getMonth() + 1
          let strDate = date.getDate()
          if (month >= 1 && month <= 9) {
            month = '0' + month
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = '0' + strDate
          }
          return year + seperator1 + month + seperator1 + strDate
        }
        return {
          loading: false,
          loading2: false,
          loading3: false,
          activeName: 'first',
          breakfastOrders: [],
          lunchOrders: [],
          dinnerOrders: [],
          breakfastTotal: 0,
          lunchTotal: 0,
          dinnerTotal: 0,
          query: {
            eat_date: nowDate()
          },
          breakfastQuery: {
            type: '',
            size: 10,
            page: 1,
            eat_type: 1,
            eat_date: '',
            eat_name: '',
            eat_phone: '',
            price_rule: '',
            is_calculated: '',
            status: '',
            orderType: ''
          },
          lunchQuery: {
            type: '',
            size: 10,
            page: 1,
            eat_type: 2,
            eat_date: '',
            eat_name: '',
            eat_phone: '',
            price_rule: '',
            is_calculated: '',
            status: '',
            orderType: ''
          },
          dinnerQuery: {
            type: '',
            size: 10,
            page: 1,
            eat_type: 3,
            eat_date: '',
            eat_name: '',
            eat_phone: '',
            price_rule: '',
            is_calculated: '',
            status: '',
            orderType: ''
          }
        }
      },
      computed: {
        breakfastTitle() {
          return '早餐(' + this.breakfastTotal + ')'
        },
        lunchTitle() {
          return '中餐(' + this.lunchTotal + ')'
        },
        dinnerTitle() {
          return '晚餐(' + this.dinnerTotal + ')'
        }
      },
      methods: {
        fetchList() {
          this.breakfastQuery.eat_date = this.query.eat_date
          this.lunchQuery.eat_date = this.query.eat_date
          this.dinnerQuery.eat_date = this.query.eat_date
          this.fetchBreakfastList()
          this.fetchLunchList()
          this.fetchDinnerList()
        },
        fetchBreakfastList(resetPage = false) {
          this.breakfastQuery.type = ''
          this.loading = true
          if (resetPage) {
            this.breakfastQuery.page = 1
          }
          fetchOrderStatistics(this.breakfastQuery).then(res => {
            this.breakfastOrders = res.data
            this.breakfastTotal = res.meta.total
            this.loading = false
          })
        },
        fetchLunchList(resetPage = false) {
          this.lunchQuery.type = ''
          this.loading2 = true
          if (resetPage) {
            this.lunchQuery.page = 1
          }
          fetchOrderStatistics(this.lunchQuery).then(res => {
            this.lunchOrders = res.data
            this.lunchTotal = res.meta.total
            this.loading2 = false
          })
        },
        fetchDinnerList(resetPage = false) {
          this.dinnerQuery.type = ''
          this.loading3 = true
          if (resetPage) {
            this.dinnerQuery.page = 1
          }
          fetchOrderStatistics(this.dinnerQuery).then(res => {
            this.dinnerOrders = res.data
            this.dinnerTotal = res.meta.total
            this.loading3 = false
          })
        },
        handleBreakfastSizeChange(size) {
          this.breakfastQuery.size = size
          this.fetchBreakfastList()
        },
        handleBreakfastCurrentChange(page) {
          this.breakfastQuery.page = page
          this.fetchBreakfastList()
        },
        handleLunchSizeChange(size) {
          this.lunchQuery.size = size
          this.fetchLunchList()
        },
        handleLunchCurrentChange(page) {
          this.lunchQuery.page = page
          this.fetchLunchList()
        },
        handleDinnerSizeChange(size) {
          this.dinnerQuery.size = size
          this.fetchDinnerList()
        },
        handleDinnerCurrentChange(page) {
          this.dinnerQuery.page = page
          this.fetchDinnerList()
        },
        // 导出订单
        downloadOrder(eat_type) {
          this.$confirm('确定导出?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (eat_type === 1) {
              this.exportOrder(this.breakfastQuery)
            } else if (eat_type === 2) {
              this.exportOrder(this.lunchQuery)
            } else if (eat_type === 3) {
              this.exportOrder(this.dinnerQuery)
            }
          }).catch(() => {})
        },
        exportOrder(row) {
          row.type = 'export'
          fetchOrderStatistics(row).then(res => {
            if (res.length === 0) {
              this.$message('无数据')
            } else {
              const filename = this.$moment().format('YYYY-MM-DD') + '-' + parseInt(10000 * Math.random())
              const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' }
              const list = res
              const tHeader = ['学校', '吃饭人姓名', '吃饭人电话', '订餐日期', '订餐类型', '原价', '实际支付价格', '是否结算餐费', '计算规则', '订单类型', '订单状态', '下单时间', '制作时间', '完成时间', '取消时间']
              const filterVal = ['school_name', 'eat_name', 'eat_phone', 'eat_date', 'eat_type', 'origin_price', 'pay_price', 'is_calculate', 'rule_name', 'type_label', 'status_label', 'created_at', 'making_at', 'finished_at', 'canceled_at']
              const data = this.formatJson(filterVal, list)
              data.unshift(tHeader)
              const wb = { SheetNames: [], Sheets: {}}
              const ws = this.sheet_from_array_of_arrays(data)
              ws['!cols'] = []
              for (let n = 0; n !== filterVal.length; ++n) {
                ws['!cols'].push({
                  wpx: 100
                })
              }
              ws['!rows'] = [{ hpx: 20 }]
              wb.SheetNames.push(filename)
              wb.Sheets[filename] = ws
              const tmpDown = new Blob([this.s2ab(this.$xlsx.write(wb, wopts))], { type: 'application/octet-stream' })
              this.$fileSaver.saveAs(tmpDown, filename + '.xlsx')
            }
          })
        },
        sheet_from_array_of_arrays(data) {
          const ws = {}
          const range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 }}
          for (let R = 0; R !== data.length; ++R) {
            for (let C = 0; C !== data[R].length; ++C) {
              if (range.s.r > R) range.s.r = R
              if (range.s.c > C) range.s.c = C
              if (range.e.r < R) range.e.r = R
              if (range.e.c < C) range.e.c = C
              const cell = {
                v: data[R][C],
                s: {
                  alignment: { horizontal: 'center', vertical: 'center' }
                }
              }
              if (cell.v == null) continue
              const cell_ref = this.$xlsx.utils.encode_cell({ c: C, r: R })
              if (typeof cell.v === 'number') {
                cell.t = 'n'
              } else if (typeof cell.v === 'boolean') {
                cell.t = 'b'
              } else if (cell.v instanceof Date) {
                cell.t = 'n'
                cell.z = this.$xlsx.SSF._table[14]
                cell.v = this.datenum(cell.v)
              } else {
                cell.t = 's'
              }
              ws[cell_ref] = cell
            }
          }
          if (range.s.c < 10000000) ws['!ref'] = this.$xlsx.utils.encode_range(range)
          return ws
        },
        datenum(v, date1904) {
          if (date1904) v += 1462
          const epoch = Date.parse(v)
          return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
        },
        s2ab(s) {
          const buf = new ArrayBuffer(s.length)
          const view = new Uint8Array(buf)
          for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
          return buf
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        }
      },
      created() {
        this.fetchList()
      }
    }
</script>

<style scoped>
    .el-icon-check{
        color: green;
    }
    .el-icon-close{
        color: red;
    }
</style>
